<template>
	<uni-easyinput :type="type" :adjust-position="adjustPosition"  :autoHeight="autosize" :disabled="disabled" :maxlength="maxlength" v-model="val"
		:placeholder="placeholder" :inputBorder="false" :clearable="false" :styles="{ backgroundColor: 'none' }"
		v-if="!defaultSlots && !name" @focus="inputFocus"></uni-easyinput>
	<view class="van-cell van-field flex-wrap flex-middle van-cell-item" v-else>
		<view class="van-cell__title van-field__label" :style="{ width: labelWidth }" v-if="label">
			<text><text v-if="required" class="required">*</text>{{ label}}</text>
		</view>
		<div class="van-cell__value van-field__value">
			<div class="van-field__body">
				<slot name="input">
					<uni-forms-item :name="name" :ref="name" :rules="curRules">
						<uni-easyinput :type="type" :adjust-position="adjustPosition" :disabled="disabled"  v-model="val" :autoHeight="autosize" :placeholder="placeholder"
							:clearable="false" />
					</uni-forms-item>
				</slot>
			</div>
		</div>
	</view>
</template>

<script setup>
	import {
		ref,
		toRefs,
		inject,
		computed,
		watch,
		onMounted,
		useSlots
	} from 'vue'
	const props = defineProps({
		modelValue: {
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: ''
		},
		label: {
			type: String,
			default: ''
		},
		labelWidth: {
			type: String,
			default: '2em'
		},
		type: {
			type: String,
			default: 'text'
		},
		autosize: {
			type: Boolean,
			default: false
		},
		maxlength: {
			type: [Number, String],
			default: -1
		},
		disabled: {
			type: Boolean,
			default: false
		},
		placeholder: {
			type: String,
			default: '请输入'
		},
		rules: {
			type: Array,
			default: () => []
		},
		required: {
			type: Boolean,
			default: false
		},
		adjustPosition:{
			type:Boolean,
			default:true
		}
	})
	const slots = useSlots()
	// console.log(`=>(van-tag.vue:9) slots.default[0]`, );
	const defaultSlots = slots && slots.default && slots.default()[0] && slots.default()[0].scopeId || null
	const {
		modelValue,
		name,
		label,
		labelWidth,
		type,
		autosize,
		maxlength,
		disabled,
		placeholder,
		rules
	} = toRefs(props)
	const emit = defineEmits(['update:modelValue','click'])
	const val = ref('')

	watch(() => val.value, (n) => {
		emit('update:modelValue', n)
	})
	watch(() => modelValue.value, (n) => {
		val.value = n
	}, {
		immediate: true
	})

	const curRules = computed(() => {
		return rules.value.map(e => {
			e.errorMessage = e.message
			return e
		})
	})
	const inputFocus=()=>{
		emit('click')
	}
</script>

<style lang="scss" scoped>
	.uni-easyinput {
		:deep(.uni-easyinput__content-input) {
			height: auto;
		}
	}

	.van-field__body {
		font-size: 14px;

		:deep(.uni-numbox) {
			display: inline-flex;
			margin-right: 4px;
		}

		:deep(.uni-input-input),
		:deep(.uni-easyinput__content-textarea) {
			color: #333;
		}
	}

	.uni-forms-item,
	.van-field__value {
		width: 100%;
	}
	.required{
		color: red;
		margin-right: 3px;
	}
</style>